---
import '../../styles/global.css'
import '../../styles/one-pager.css'

import { CollectionEntry, Render, getCollection } from 'astro:content'
import DowngradeHeadings from '../../components/DowngradeHeadings.astro'
import ScrollPadding from '../../components/ScrollPadding.astro'
import ColoredTitle from '../../components/ColoredTitle.astro'
import { abstract } from '../../metadata'

const chapters = await getCollection('chapters')
const rendered: [ CollectionEntry<'chapters'>, Awaited<Render['.mdx']> ][]
	= await Promise.all(chapters.map(async chapter => [ chapter, await chapter.render() ]))
---

<html lang='en'>
<head>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, initial-scale=1' />

	<link rel='preconnect' href='https://fonts.googleapis.com' />
	<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
	<link href='https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap' rel='stylesheet' />

	<!-- <SEO chapterSlug='intro' /> -->
	<script defer data-domain='cpu.land' src='https://plausible.io/js/script.js' />
</head>
<body>
	<header>
		<div class='content'>
			<h1><ColoredTitle onDark /></h1>
			<p class='byline'>
				By
				<a target='_blank' href='https://kognise.dev/'>Lexi Mattick</a>
				&
				<a href='https://hackclub.com/'>Hack Club</a>
				&middot;
				July, 2023
			</p>
		</div>
		<div class='editions'>
			<div class='label'>Editions</div>
			<div>
				<a href='/'>Normal</a> &middot;
				<strong>One-Pager</strong> &middot;
				<a href='/editions/printable.pdf'>PDF</a> <!--&middot;
				<a href='/editions/book.epub'>EPUB</a>-->
			</div>
		</div>
		<img src='/squiggles/print.svg' class='cover-bg' />
	</header>

	<main>
		<div class='content'>
			{rendered.map(([ chapter, { Content } ]) => <>
				<h2 id={chapter.slug}>Chapter {chapter.data.chapter}: {chapter.data.title}</h2>
				<DowngradeHeadings>
					<Content />
				</DowngradeHeadings>
			</>)}

			<ScrollPadding hideEditions />
		</div>
	</main>
</body>
</html>
